<template>
  <view class="test-order-types-page">
    <!-- 顶部导航栏 -->
    <uni-nav-bar 
      :border="false"
      background-color="#ffffff"
      color="#333333"
      title="订单类型测试"
      left-icon="left"
      @clickLeft="goBack"
    />

    <view class="content">
      <view class="header">
        <text class="title">测试不同订单类型详情</text>
        <text class="desc">点击下方按钮查看不同类型订单的详情展示</text>
      </view>

      <view class="test-buttons">
        <button class="test-btn express" @click="testExpressOrder">
          <text class="btn-icon">📦</text>
          <text class="btn-text">快递代取订单</text>
        </button>

        <button class="test-btn takeout" @click="testTakeoutOrder">
          <text class="btn-icon">🍔</text>
          <text class="btn-text">外卖代取订单</text>
        </button>

        <button class="test-btn shopping" @click="testShoppingOrder">
          <text class="btn-icon">🛒</text>
          <text class="btn-text">代购服务订单</text>
        </button>

        <button class="test-btn document" @click="testDocumentOrder">
          <text class="btn-icon">📄</text>
          <text class="btn-text">文件代取订单</text>
        </button>

        <button class="test-btn medicine" @click="testMedicineOrder">
          <text class="btn-icon">💊</text>
          <text class="btn-text">药品代购订单</text>
        </button>

        <button class="test-btn other" @click="testOtherOrder">
          <text class="btn-icon">🔧</text>
          <text class="btn-text">其他服务订单</text>
        </button>
      </view>

      <!-- 当前订单预览 -->
      <view v-if="currentOrder" class="order-preview">
        <view class="preview-header">
          <text class="preview-title">当前测试订单</text>
        </view>
        <view class="preview-content">
          <text class="order-type">{{ getServiceTypeText(currentOrder.serviceType) }}</text>
          <text class="order-title">{{ currentOrder.title }}</text>
          <text class="order-price">¥{{ currentOrder.totalAmount }}</text>
        </view>
        <button class="view-detail-btn" @click="viewOrderDetail">查看完整详情</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 声明uni全局变量
declare const uni: any

// 当前测试订单
const currentOrder = ref<any>(null)

// 服务类型文本映射
const getServiceTypeText = (serviceType: string): string => {
  const typeMap = {
    'express': '快递代取',
    'takeout': '外卖代取',
    'shopping': '代购服务',
    'document': '文件代取',
    'medicine': '药品代购',
    'other': '其他服务'
  }
  return typeMap[serviceType] || '未知服务'
}

// 测试快递代取订单
const testExpressOrder = () => {
  currentOrder.value = {
    id: 101,
    orderId: 'EXP' + Date.now(),
    serviceType: 'express',
    title: '快递代取 - 中通快递包裹',
    pickup: '中通快递东院网点',
    delivery: '宿舍楼A栋101',
    customerName: '张同学',
    customerPhone: '138****8888',
    totalAmount: '8.50',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'normal',
    courierCompany: '中通快递',
    trackingNumber: 'ZT2023121800001',
    weight: '2.5kg',
    size: '中等包裹',
    fragile: false,
    items: [
      {
        size: '中等',
        price: '8.50',
        pickupCode: 'A123',
        pickupLocation: '中通快递东院网点',
        courierCompany: '中通快递',
        weight: '2.5kg',
        description: '服装包裹'
      }
    ],
    deliveryTime: '今日18:00前',
    baseFee: 8,
    tipAmount: 0.5,
    specialNote: '请轻拿轻放，谢谢'
  }
  
  uni.showToast({
    title: '已生成快递代取测试订单',
    icon: 'success'
  })
}

// 测试外卖代取订单
const testTakeoutOrder = () => {
  currentOrder.value = {
    id: 102,
    orderId: 'TO' + Date.now(),
    serviceType: 'takeout',
    title: '外卖代取 - 麦当劳套餐',
    pickup: '麦当劳(万达店)',
    delivery: '教学楼B座202',
    customerName: '李同学',
    customerPhone: '139****9999',
    totalAmount: '6.00',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'high',
    restaurant: '麦当劳(万达店)',
    orderNumber: 'M202312180001',
    selectedTime: '12:30-13:00',
    expectedDeliveryTime: '13:00',
    orderDetail: '巨无霸套餐x1，可乐改雪碧',
    basePrice: 5,
    tipAmount: 1,
    instructions: '不要洋葱，多加生菜'
  }
  
  uni.showToast({
    title: '已生成外卖代取测试订单',
    icon: 'success'
  })
}

// 测试代购服务订单
const testShoppingOrder = () => {
  currentOrder.value = {
    id: 103,
    orderId: 'SH' + Date.now(),
    serviceType: 'shopping',
    title: '代购服务 - 日用品采购',
    pickup: '华润万家超市',
    delivery: '宿舍楼C栋301',
    customerName: '王同学',
    customerPhone: '136****6666',
    totalAmount: '15.00',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'normal',
    store: '华润万家超市',
    budget: 100,
    receipt: true,
    itemList: [
      {
        name: '洗发水',
        quantity: 1,
        brand: '海飞丝',
        specifications: '400ml',
        estimatedPrice: 25,
        alternatives: true
      },
      {
        name: '牙膏',
        quantity: 2,
        brand: '高露洁',
        specifications: '120g',
        estimatedPrice: 15,
        alternatives: false
      },
      {
        name: '毛巾',
        quantity: 1,
        estimatedPrice: 20,
        alternatives: true
      }
    ],
    instructions: '如果海飞丝没有，可以买其他品牌的洗发水'
  }
  
  uni.showToast({
    title: '已生成代购服务测试订单',
    icon: 'success'
  })
}

// 测试文件代取订单
const testDocumentOrder = () => {
  currentOrder.value = {
    id: 104,
    orderId: 'DOC' + Date.now(),
    serviceType: 'document',
    title: '文件代取 - 学籍证明',
    pickup: '学生事务大厅',
    delivery: '宿舍楼D栋205',
    customerName: '赵同学',
    customerPhone: '137****7777',
    totalAmount: '10.00',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'urgent',
    documentType: '学籍证明',
    department: '学生事务中心',
    recipientIdRequired: true,
    instructions: '需要携带身份证原件，办理时间为工作日9:00-17:00'
  }
  
  uni.showToast({
    title: '已生成文件代取测试订单',
    icon: 'success'
  })
}

// 测试药品代购订单
const testMedicineOrder = () => {
  currentOrder.value = {
    id: 105,
    orderId: 'MED' + Date.now(),
    serviceType: 'medicine',
    title: '药品代购 - 感冒药',
    pickup: '康美大药房',
    delivery: '宿舍楼E栋108',
    customerName: '钱同学',
    customerPhone: '135****5555',
    totalAmount: '12.00',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'urgent',
    pharmacy: '康美大药房(校园店)',
    prescription: false,
    urgencyLevel: 'urgent',
    instructions: '感冒严重，请尽快购买。需要: 999感冒灵颗粒1盒，板蓝根冲剂1盒'
  }
  
  uni.showToast({
    title: '已生成药品代购测试订单',
    icon: 'success'
  })
}

// 测试其他服务订单
const testOtherOrder = () => {
  currentOrder.value = {
    id: 106,
    orderId: 'OTH' + Date.now(),
    serviceType: 'other',
    title: '其他服务 - 帮助搬东西',
    pickup: '旧宿舍楼F栋',
    delivery: '新宿舍楼G栋',
    customerName: '孙同学',
    customerPhone: '134****4444',
    totalAmount: '20.00',
    orderTime: new Date().toLocaleString(),
    status: 'available',
    priority: 'low',
    estimatedTime: '1小时',
    weight: '约20kg',
    size: '两个行李箱 + 一些书籍',
    fragile: true,
    instructions: '帮助搬家，有一些易碎物品需要小心搬运。主要是个人物品，包括衣服、书籍、电脑等。时间灵活，可以提前预约。'
  }
  
  uni.showToast({
    title: '已生成其他服务测试订单',
    icon: 'success'
  })
}

// 查看订单详情
const viewOrderDetail = () => {
  if (!currentOrder.value) {
    uni.showToast({
      title: '请先选择一个订单类型',
      icon: 'none'
    })
    return
  }
  
  // 存储测试订单数据
  uni.setStorageSync('testOrderDetail', JSON.stringify(currentOrder.value))
  
  // 跳转到订单详情页面
  uni.navigateTo({
    url: `/pages/JJK/order-detail?id=${currentOrder.value.id}&test=true`
  })
}

// 返回
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.test-order-types-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 8px;
  }
  
  .desc {
    font-size: 14px;
    color: #666;
    display: block;
  }
}

.test-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
  
  .test-btn {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    &.express {
      background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    }
    
    &.takeout {
      background: linear-gradient(135deg, #FF9800 0%, #F57400 100%);
    }
    
    &.shopping {
      background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
    }
    
    &.document {
      background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
    }
    
    &.medicine {
      background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
    }
    
    &.other {
      background: linear-gradient(135deg, #607D8B 0%, #37474F 100%);
    }
    
    .btn-icon {
      font-size: 24px;
      margin-right: 12px;
    }
    
    .btn-text {
      flex: 1;
      text-align: left;
    }
  }
}

.order-preview {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  .preview-header {
    margin-bottom: 16px;
    
    .preview-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
  
  .preview-content {
    margin-bottom: 20px;
    
    .order-type {
      display: block;
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
    }
    
    .order-title {
      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }
    
    .order-price {
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #ff6b4a;
    }
  }
  
  .view-detail-btn {
    width: 100%;
    height: 44px;
    background-color: #ff6b4a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
